<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>幸福是什么</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
		<script src="js/scaling.js" type="text/javascript" charset="utf-8"></script>
    <!-- Demo styles -->
</head>
<body>
	<div class="setWidth">
		<!-- Swiper -->
	    <div class="swiper-container">
	        <div class="swiper-wrapper">
	            <div class="swiper-slide box1">
	            	<div class="img1-1 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s"><img src="images/img1-1.png"/></div>
	            	<div class="img1-2 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s"><img src="images/img1-2.png"/></div>
	        		<div style="animation-iteration-count:infinite" class="top-bar ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><img src="images/top.png"/></div>
	            </div>
	             <div class="swiper-slide box2">
	            	<div class="img2-1 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s"><img src="images/img2-1.png"/></div>
	            	<div class="img2-2 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s"><img src="images/img2-2.png"/></div>
	        		<div style="animation-iteration-count:infinite" class="top-bar ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><img src="images/top.png"/></div>
	             </div>
	            <div class="swiper-slide box3">
	            	<div class="img3-1 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s"><img src="images/img3-1.png"/></div>
	            	<div class="img3-2 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s"><img src="images/img3-2.png"/></div>
	        		<div style="animation-iteration-count:infinite" class="top-bar ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><img src="images/top.png"/></div>
	            </div>
	            <div class="swiper-slide box4">
	            	<div class="img4-1 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"><img src="images/img4-1.png"/></div>
	            	<div class="img4-2 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"><img src="images/img4-2.png"/></div>
	        		<div style="animation-iteration-count:infinite" class="top-bar ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><img src="images/top.png"/></div>
	            </div>
	            <div class="swiper-slide box6">
	            	<div class="banner"><img src="images/banner1.jpg"/></div>	
	            	<div class="info">
	            		<div class="dcwj">
	            			<div class="group">
	            				<div class="name">1、您认为下列保障哪项最需要购买？</div>
	            				<div class="answer">
	            					<p><span class="active"></span>人生意外保险</p>
	            					<p><span></span>养老年金保障或者其他重大疾病保障</p>
	            					<p><span></span>教育基金保险</p>
	            				</div>
	            			</div>
	            			<div class="group">
	            				<div class="name">2、您愿意花费家庭总收入的多少比例购买保险？</div>
	            				<div class="answer">
	            					<p><span class="active"></span>10%</p>
	            					<p><span></span>20%</p>
	            					<p><span></span>大于30%</p>
	            				</div>
	            			</div>
	            			<div class="group">
	            				<div class="name">3、家庭成员中您认为谁最需要购买保险？</div>
	            				<div class="answer">
	            					<p><span class="active"></span>家庭中青年人</p>
	            					<p><span></span>家庭中老年人</p>
	            					<p><span></span>家庭中小孩</p>
	            				</div>
	            			</div>
	            		</div>
	            	</div>
	            </div>
	            <div class="swiper-slide box5">
	            	<div class="text"><span>活动说明</span></div>
	           		<div class="banner"><img src="images/banner2.jpg"/></div>	
	           		<div class="info">
	           			<div class="s-form">
	           				<div class="title">为了确保您能正常领取所赠险额，请填写真实有效信息</div>
							<form action="" method="post">
								<div class="group">
									<div class="line">
										<label>
											<span class="name">真实姓名</span>
											<input type="text" class="input-text" name="" placeholder="请输入您的真实姓名" id="userName" value="" />
										</label>
									</div>
								</div>
								<div class="group">
									<div class="line">
										<label>
											<span class="name">身份证号</span>
											<input type="text" class="input-text" name="" placeholder="请输入有效身份证" id="idNumber" value="" />
										</label>
									</div>
								</div>
								<div class="group">
									<div class="line">
										<label>
											<span class="name">手机号码</span>
											<input type="text" class="input-text" name="" placeholder="请输入11位有效手机号" id="mobile" value="" />
										</label>
									</div>
								</div>
								<div class="group">
									<div class="line line-yzm">
										<label>
											<input type="text" class="input-text" name="" placeholder="请输入验证码" id="rndcode" value="" />
										</label>										
									</div>
									<div class="btn-yzm bg">获取验证码</div>
									<!--class  bg是获取验证码之后的样式-->
								</div>
								<div class="group">
									<div class="btn-sub"><a href="questionnaire.html">免费领取</a></div>
								</div>
								<div class="error"><p id="rndcodeCue">提示错误信息</p></div>
								
							</form>
						</div>
	           		</div>
	            </div>
	        </div>
	    </div>
	    
	    <div class="mask"></div>
	    <div class="explain-window">
	    	<div class="zs">
	    		<img src="images/pic02.png"/>
	    	</div>
	    	<div class="info">
	    		<img src="images/pic03.jpg"/>
	    		<p>1.本保险仅提供电子保单，保单生效后客户会自动收到短信通知。</p>
	    		<p>2.投保成功后，请保存好电子保单号，以方便查询及理赔。</p>
				<p>3.保险公司将有工作人员电话回访，为您确认免费保障生效事宜。</p>
				<p>4.此款保险存在地域等限制，若您不在承保地域内，我们将为您升级为其他同类优质产品（如中国平安、泰康人寿、中美大都会、阳光保险）。</p>
				<p>5.本活动由保险公司主办并承保，主办方对活动有最终解释权。</p>
				<a>确定</a>
	    	</div>
	    </div>
	</div>
	<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/swiper.animate1.0.2.min.js" type="text/javascript" charset="utf-8"></script>
	
    <script>
      
	    var swiper = new Swiper('.swiper-container', {
	        direction: 'vertical',
	        mousewheelControl:true,
	        onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
			   swiperAnimateCache(swiper); //隐藏动画元素 
			   swiperAnimate(swiper); //初始化完成开始动画
			}, 
			onSlideChangeEnd: function(swiper){ 
			   swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
			} 
	    });
	    $(function(){
	    	$(".box6 .group").each(function(i){
	    		$(".box6 .group").eq(i).find(".answer p").each(function(j){
	    			$(this).click(function(){
	    				$(".box6 .group").eq(i).find(".answer p span").removeClass("active");
	    				$(".box6 .group").eq(i).find(".answer p").eq(j).find("span").addClass("active");
	    				
	    			})
	    		})
	    	})
	    	
	    	$(".box5 .text span").click(function(){
	    		$(".mask").show();
	    		$(".explain-window").show();
	    	})
	    	$(".explain-window a").click(function(){
	    		$(".mask").hide();
	    		$(".explain-window").hide();
	    	})
	    })
    </script>
</body>
</html>